<template>
  <div>
    <div v-if="!data.isMobile" style="width: 100%;position: relative;height: calc(100vh - 105px);">
    <div v-if="teacherInfo!=undefined" style="width: 100%;position: relative;height: 100%;">
      <div style="width: calc(100% - 320px);height:100%;border:1px solid rgb(230,230,230);border-radius: 5px;float: right;display: inline-block;margin-top: 20px;">
        <div style="padding: 20px 20px;font-size: 20px;border-bottom: 1px solid rgb(230,230,230);">
          {{ teacherInfo.name }}
          <span v-if="teacherLoginStatus==true" style="padding: 2px 3px;border-radius: 3px;background-color: green;color:white;font-size: 12px;">在线</span>
          <span v-if="!teacherLoginStatus" style="padding: 2px 3px;border-radius: 3px;background-color: gray;color:white;font-size: 12px;">离线</span>
        </div>
        <div ref="0" id="chatwindow" style="height: calc(100% - 210px);width: 100%;padding: 20px 20px;overflow-y: scroll;position: relative;overflow-x: hidden;" @scroll="scrollChatWindow">
          <div v-bind:key="item" v-for="item in messageItems" style="width: 100%;margin-bottom: 10px;">
            <div style="text-align: center;">
              <div style="display: inline-block;padding: 5px 5px;background-color: lightgray;color: white;border-radius: 5px;">
                {{ parseDateTime(item.time) }}
              </div>
            </div>
            <chatItem :data="subitem" :my-account="data.loginedUserInfo.account" v-bind:key="subitem" v-for="subitem in item.items"></chatItem>
          </div>
        </div>
        <div style="width: 100%;height: calc(210px - 63px);padding: 16px 8px;position: relative;border-top: 1px solid rgb(230,230,230);">
          <a-textarea v-model="chatInput" style="background-color: white;border: 0;padding: 0 0;" allow-clear :auto-size="{
    minRows:3,
    maxRows:3
  }"/>
          <div style="text-align: right;margin-top: 5px;padding-right: 12px;position: relative;">
            <div style="display: inline-block;display: inline-block;float: right;">
              <a-button type="primary" :loading="isSending" @click="sendMessage" :disabled="chatInput==''">发送</a-button>
            </div>
            
            <div style="float: left;display: inline-block;padding-left: 12px;">
              <a-trigger trigger="click" :unmount-on-close="false">
      <a-button style="padding: 0 6px;color: dimgray;">
        <svg width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zm-4.119 10.366a.8.8 0 01.235.565V35.4a.6.6 0 01-.6.6H23.51l.012.011H12.689a.6.6 0 01-.424-1.024l4.442-4.443a.8.8 0 011.12-.01l2.423 2.331 6.5-6.5a.8.8 0 011.131 0zM42 4a2 2 0 012 2v25a1 1 0 01-1 1h-2a1 1 0 01-1-1V8H17a1 1 0 01-1-1V5a1 1 0 011-1h25zM18 20v6h-6v-6h6z" fill="currentColor"/></svg><span style="margin-left: 5px;">发送图片</span>
      </a-button>
      <template #content>
        <div style="width: 300px;padding: 20px 20px;border-radius: 5px;border: 1px solid rgb(230,230,230);background-color: white;">
          请输入图片地址
          <a-input v-model="pictureUrl" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;margin-top: 5px;margin-bottom: 5px;" placeholder="图片地址"></a-input>
          <div style="text-align: right;">
            <a-button type="primary" :loading="isSending" @click="sendPicture" :disabled="pictureUrl==''">发送</a-button>
          </div>
        </div>
      </template>
              </a-trigger>
            </div>
          </div>
        </div>
      </div>
 <div style="width: 300px;display: inline-block;position: relative;margin-top: 20px;">
  <div style="border: 1px solid rgb(230,230,230);">
    <div style="border-bottom: 1px solid rgb(230,230,230);padding: 20px 20px;">
      咨询师个人信息
    </div>
    <div style="padding: 20px 20px;line-height: 30px;">
      <p>姓名：{{ teacherInfo.name }}</p>
      <p>身份证号：{{ teacherInfo.idNumber }}</p>
    </div>
  </div>
 </div>
    </div>
    <div v-if="teacherInfo==undefined" style="width: 100%;height: 100%;">
      <div v-if="isGettingTeacherInfo" style="width: 100%;height: 100%;padding-left: 50%;padding-top: calc(50vh - 22.5px);">
        <div style="transform: translate(-50%,-50%);display: inline-block;">
          <a-button :loading="true" style="scale: 1.5;color: black;background-color: white;">请稍后</a-button>
        </div>
      </div>
      <div v-if="!isGettingTeacherInfo" style="width: 100%;height: 100%;padding-left: 50%;padding-top: calc(50vh - 22.5px);">
        <div style="transform: translate(-50%,-50%);">
          <p style="font-size: 26px;color: gray;margin-bottom: 10px;">专业咨询</p>
          <p style="text-indent: 2em;line-height: 30px;">点击下方按钮，开始与我们的咨询师聊天，获取关于填报志愿的信息和智能化的志愿填报建议。志愿助手平台将为您提供全方位的辅助服务，帮助您了解院校信息和查询专业详情，满足您的需求。</p>
          <div style="text-align: right;margin-top: 10px;">
            <a-button style="padding: 0 30px;" type="primary" @click="startChat" :loading="isStarting">开始</a-button>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div v-if="data.isMobile" style="width: 100%;height: calc(100% - 55px - 45.29px);padding: 10px 10px;position: relative;">
      <div style="width: 100%;padding: 10px 10px;padding-bottom: 10px;">
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 22px;font-weight: bold;">专业咨询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(11)">问答区</span>
      </div>
      <div v-if="teacherInfo!=undefined" style="width: 100%;padding: 10px 10px;line-height: 30px;">
        <span style="font-size: 20px;">{{ teacherInfo.name }}</span>
        <span v-if="teacherLoginStatus==true" style="padding: 2px 3px;border-radius: 3px;background-color: green;color:white;font-size: 12px;position: relative;bottom: 3px;left: 5px;">在线</span>
        <span v-if="!teacherLoginStatus" style="padding: 2px 3px;border-radius: 3px;background-color: gray;color:white;font-size: 12px;position: relative;bottom: 3px;left: 5px;">离线</span>
      </div>
      <div v-if="teacherInfo!=undefined" style="width: 100%;overflow-y: scroll;height: calc(100% - 115px);overflow-x: hidden;" id="chatwindow">
        <div v-bind:key="item" v-for="item in messageItems" style="width: 100%;margin-bottom: 10px;">
            <div style="text-align: center;">
              <div style="display: inline-block;padding: 5px 5px;background-color: lightgray;color: white;border-radius: 5px;">
                {{ parseDateTime(item.time) }}
              </div>
            </div>
            <chatItem :data="subitem" :my-account="data.loginedUserInfo.account" v-bind:key="subitem" v-for="subitem in item.items"></chatItem>
          </div>
      </div>
      <div v-if="teacherInfo!=undefined" style="border-top: 1px solid rgb(230,230,230);">
        <a-textarea v-model="chatInput" style="background-color: white;border: 0;padding: 0 0;" allow-clear :auto-size="{
    minRows:3,
    maxRows:3
  }"/>
          <div style="text-align: right;margin-top: 5px;padding-right: 12px;position: relative;">
            <div style="display: inline-block;display: inline-block;float: right;">
              <a-button type="primary" :loading="isSending" @click="sendMessage" :disabled="chatInput==''">发送</a-button>
            </div>
            
            <div style="float: left;display: inline-block;padding-left: 12px;">
              <a-trigger trigger="click" :unmount-on-close="false">
      <a-button style="padding: 0 6px;color: dimgray;">
        <svg width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zm-4.119 10.366a.8.8 0 01.235.565V35.4a.6.6 0 01-.6.6H23.51l.012.011H12.689a.6.6 0 01-.424-1.024l4.442-4.443a.8.8 0 011.12-.01l2.423 2.331 6.5-6.5a.8.8 0 011.131 0zM42 4a2 2 0 012 2v25a1 1 0 01-1 1h-2a1 1 0 01-1-1V8H17a1 1 0 01-1-1V5a1 1 0 011-1h25zM18 20v6h-6v-6h6z" fill="currentColor"/></svg><span style="margin-left: 5px;">发送图片</span>
      </a-button>
      <template #content>
        <div style="width: 300px;padding: 20px 20px;border-radius: 5px;border: 1px solid rgb(230,230,230);background-color: white;">
          请输入图片地址
          <a-input v-model="pictureUrl" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;margin-top: 5px;margin-bottom: 5px;" placeholder="图片地址"></a-input>
          <div style="text-align: right;">
            <a-button type="primary" :loading="isSending" @click="sendPicture" :disabled="pictureUrl==''">发送</a-button>
          </div>
        </div>
      </template>
              </a-trigger>
            </div>
          </div>
      </div>
      <div v-if="teacherInfo==undefined" style="width: 100%;height: 100%;padding-left: 50%;padding-top: 50vh;overflow-y: hidden;">
        <div style="transform: translate(-50%,-50%);width: 100%;">
          <div style="font-size: 20px;color: gray;margin-bottom: 10px;">
            专业咨询
          </div>
          <div style="text-indent: 2em;width: 100%;margin-bottom: 10px;">
            点击下方按钮，开始与我们的咨询师聊天，获取关于填报志愿的信息和智能化的志愿填报建议。志愿助手平台将为您提供全方位的辅助服务，帮助您了解院校信息和查询专业详情，满足您的需求。
          </div>
          <div style="text-align: right;">
            <a-button type="primary" @click="startChat" :loading="isStarting">开始</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import axios from 'axios';
import chatItem from '@/components/chatItem.vue';

export default{
  components:{
    chatItem
  },
  data(){
    return{
      teacherInfo:undefined,
      isGettingTeacherInfo:false,
      isStarting:false,
      chatInput:'',
      isSending:false,
      pictureUrl:'',
      messageItems:[],
      isBottom:false,
      teacherLoginStatus:-1,
    }
  },
  mounted(){
    if(this.data.loginedUserInfo==undefined){
      this.changePage(7);
      return;
    }
    if(this.data.loginedUserInfo.isVip==0){
        this.changePage(8);
        this.showBuyVIPWarningForm();
        return;
    }
    this.getTeacherInfo();
    setInterval(this.updateStatus,10000);
  },
  methods:{
    scrollChatWindow(){
      // console.log(document.getElementById("chatwindow").scrollTop,document.getElementById("chatwindow").clientHeight,document.getElementById("chatwindow").scrollHeight)
      if(document.getElementById("chatwindow").scrollTop+document.getElementById("chatwindow").clientHeight+1==document.getElementById("chatwindow").scrollHeight){
        this.isBottom=true;
      }else{
        this.isBottom=false;
      }
    },
    sendPicture(){
      this.isSending=true;
      var config = {
   method: 'post',
   url: '/api/v1/teacher/send?data=' + JSON.stringify({
    fromAccount:this.data.loginedUserInfo.account,
    toAccount:this.teacherInfo.account,
    type:2,
    content:this.pictureUrl,
    time:this.formatDateTime(),
   }),
   headers: { 
      'Accept': '*/*',
   }
};

axios(config)
.then( (res) => {
  this.isSending=false;
   if(res.data.status==1){
    this.pictureUrl='';
    this.getList(true);
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    changeChatWindowToBottom(){
      setTimeout(()=>{
        document.getElementById("chatwindow").scrollTop=1000000;
      },1);
    },
    getList(isFirst){
      var config = {
   method: 'get',
   url: '/api/v1/teacher/getList?data=' + JSON.stringify({
    account1:this.data.loginedUserInfo.account,
    account2:this.teacherInfo.account
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
   if(res.data.status==1){
    if(isFirst){
      this.changeChatWindowToBottom();
    }
    this.messageItems=res.data.results
    this.teacherLoginStatus=res.data.loginStatus
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    sendMessage(){
      this.isSending=true;
      var config = {
   method: 'post',
   url: '/api/v1/teacher/send?data=' + JSON.stringify({
    fromAccount:this.data.loginedUserInfo.account,
    toAccount:this.teacherInfo.account,
    type:1,
    content:this.chatInput,
    time:this.formatDateTime(),
   }),
   headers: { 
      'Accept': '*/*',
   }
};

axios(config)
.then( (res) => {
  this.isSending=false;
   if(res.data.status==1){
    this.chatInput='';
    this.getList(true);
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    updateStatus(){
      var config = {
   method: 'post',
   url: '/api/v1/users/updateStatus?data=' + JSON.stringify({
    account:this.data.loginedUserInfo.account
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then(() => {
  //  
})
    },
    startChat(){
      this.isStarting=true;
      var config = {
   method: 'post',
   url: '/api/v1/teacher/start?data=' + JSON.stringify({
    account:this.data.loginedUserInfo.account
   }),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
  this.isStarting=false;
   if(res.data.status==1){
    this.getTeacherInfo()
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    getTeacherInfo(){
      this.isGettingTeacherInfo=true;
      var config = {
   method: 'get',
   url: '/api/v1/teacher/get?data=' + JSON.stringify({
    account:this.data.loginedUserInfo.teacherAccount
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then( (res) => {
  this.isGettingTeacherInfo=false;
   if(res.data.status==1){
    this.teacherInfo=res.data.results
    if(this.teacherInfo==undefined){
      return;
    }
    this.getList(true);
    setInterval(()=>{
      this.getList();
    },1000);
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    formatDateTime() {
  const now = new Date();
  
  const year = now.getFullYear().toString().slice(2);
  let month = (now.getMonth() + 1).toString();
  let day = now.getDate().toString();
  let hour = now.getHours().toString();
  let minute = now.getMinutes().toString();

  // 格式化月份、日期、时、分为两位数形式
  if (month.length === 1) {
    month = '0' + month;
  }
  if (day.length === 1) {
    day = '0' + day;
  }
  if (hour.length === 1) {
    hour = '0' + hour;
  }
  if (minute.length === 1) {
    minute = '0' + minute;
  }

  const formattedDateTime = year + month + day + hour + minute;
  return formattedDateTime;
    },
    parseDateTime(dateTimeStr) {
      const year = '20' + dateTimeStr.slice(0, 2);
  const month = dateTimeStr.slice(2, 4);
  const day = dateTimeStr.slice(4, 6);
  const hour = dateTimeStr.slice(6, 8);
  const minute = dateTimeStr.slice(8, 10);

  // 构造日期对象
  const date = new Date(year, month - 1, day, hour, minute);

  // 格式化日期和时间
  const formattedDate = `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
  const formattedTime = `${date.getHours()}:${date.getMinutes()}`;

  // 返回格式化后的日期和时间
  return `${formattedDate} ${formattedTime}`;
    }
  },
  props:{
    data:undefined,
    showUniversityIntroductionPage:undefined,
    changePage:undefined,
    showBuyVIPWarningForm:undefined
  },
}
</script>

<style scoped>

</style>